<template>
    <div class="map">
      <Header />
      <div class="container">
        <baidu-map
          class="map-contain"
          :scroll-wheel-zoom="true"
          :center="center"
          :zoom="zoom"
          MapType="BMAP_SATELLITE_MAP"
          @ready="mapReady"
        >
          <bm-polygon
            :path="polygonPath"
            stroke-color="#000"
            :stroke-opacity="1"
            fill-color="blue"
            :stroke-weight="1"
            :fill-opacity="0.2"
  
            @lineupdate="updatePolygonPath"
            @click="moveTo"
          />
          <!-- @mouseout="selectMarker.show = false" -->
          <!-- <bm-marker
          v-for="(marker, index) in markers"
          :key="index"
          :rotation="marker.position.rotation"
          :offset="{ width: 3, height: 0 }"
          :position="marker.position"
          @click="markerClick(marker)"
          @mouseout="selectMarker.show = false"
          :icon="{
            url: marker.icon,
            size: { width: marker.width, height: marker.height },
          }"
        >
          <bm-label
            v-if="marker.label"
            :content="marker.label"
            :labelStyle="{ color: '#2F80DE', fontSize: '12px' }"
            :offset="{ width: -28, height: -30 }"
          />
  
          <bm-info-window
            :show="marker.show"
            :closeOnClick="false"
            @close="infoWindowClose(marker)"
            @open="infoWindowOpen(marker)"
          >
            <p v-if="marker.carInfo.recCode">
              接运编码：{{ marker.carInfo.recCode }}
            </p>
            <p>车牌号：{{ marker.carInfo.recCarNo }}</p>
            <p>司机：{{ marker.carInfo.driver }}</p>
            <p v-if="marker.carInfo.contact">
              承办人：{{ marker.carInfo.contact }}
            </p>
            <p v-if="marker.carInfo.contactPhone">
              承办人手机号：{{ marker.carInfo.contactPhone }}
            </p>
            <p v-if="marker.carInfo.deadName">
              逝者名：{{ marker.carInfo.deadName }}
            </p>
            <p v-if="marker.carInfo.purpose">
              接运用途：{{ marker.carInfo.purpose }}
            </p>
            <p v-if="marker.carInfo.recStateDesc">
              接运状态：{{ marker.carInfo.recStateDesc }}
            </p>
  
            <p v-if="marker.carInfo.address">
              接运地址：{{ marker.carInfo.address }}
            </p>
            <p v-if="marker.carInfo.transportDestination">
              接运目的地：{{ marker.carInfo.transportDestination }}
            </p>
              <p v-if="marker.carInfo.arrivalTime">
              预约到达时间：{{ marker.carInfo.arrivalTime }}
            </p>
          </bm-info-window>
        </bm-marker> -->
        </baidu-map>
        <!-- 左侧弹框 -->
        <div
          class="left_model"
          :class="moveFlag ? 'leftmodelgo' : 'leftmodelback'"
        >
          <div class="left_model_title">
            <span>左侧数据</span>
          </div>
        </div>
        <!-- 展示隐藏按钮 -->
        <el-button
          @click="moveFlag = !moveFlag"
          class="model_close"
          type="primary"
          :icon="moveFlag ? 'el-icon-back' : 'el-icon-right'"
          circle
        ></el-button>
        <!-- 中间弹框 -->
        <div class="center_model">
          <div class="map_chart" ref="map_chart"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Header from "@/components/Header.vue";
  import mapData from "@/map/index.json";
  import dongyingMapData from "@/map/index.json";
  import countTo from "vue-count-to";
  import  'echarts/extension/bmap/bmap'
  import axios from 'axios';
  export default {
    components: {
      Header,
      countTo,
    },
    data() {
      return {
        chartInstance: null,
        colors:["red","green","blue","yellow","pink"],
        mapName:'',
        dataList: [
          { name: "东营区", value: 1, label: "dongyingqu"},
          { name: "河口区", value: 2, label: "hekouqu" },
          { name: "垦利区", value: 3, label: "kenliqu"},
          { name: "利津县", value: 4, label: "lijinxian"},
          { name: "广饶县", value: 5, label: "guangraoxian" },
        ],
        pieces: [
          {
            gte: 1,
            lt: 2,
            label: "东营区",
          },
          {
            gte: 2,
            lt: 3,
            label: "河口区",
          },
          {
            gt: 3,
            lt: 4,
            label: "垦利区",
          },
          {
            gt: 4,
            lt: 5,
            label: "利津县", 
          },
          {
            gt: 5,
            lt: 6,
            label: "广饶县",  
          },
        ],
        polygonPath: [],
        moveFlag: true,
        zoom: 12, //地图相关设置118.681385,37.439642
        center: { lng: 118.681385, lat: 37.439642 },
        map: null,
      };
    },
    mounted() {
       this.initChart();
      window.addEventListener("resize", this.screenAdapter);
    },
    destroyed() {
      window.removeEventListener("resize", this.screenAdapter);
    },
    created() {
      console.log(mapData.features, "8888");
      // mapData.features[0].geometry.coordinates[0].forEach((item) => {
      //   this.polygonPath.push({ lng: item[0], lat: item[1] });
      // });
    },
    methods: {
      moveTo({ type, target, point, pixel }) {
        console.log(point);
        // var point = new BMap.Point(point.lng,point.lat);
        //  this.center=point
        this.map.centerAndZoom(point, 14);
      },
      async initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.map_chart);
        // 获取中国地图的矢量数据
        // http://localhost:8999/static/map/china.json
        // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
        this.$echarts.registerMap("dongying", dongyingMapData);
        const initOption = {
          title: {
            text: "▎ 公墓分布",
            left: 20,
            top: 20,
          },
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                show: true,
              },
            },
          }, // 提供下载工具
          visualMap: {
            min: 0,
            max: 100000,
            left: 26,
            bottom: 40,
            showLabel: !0,
            // text: ["土葬", "智慧殡葬"],
            pieces: this.pieces,
            color:this.colors,
            show: true,
          },
          geo: {
            // type: "map",
            map: "dongying",
            //  默认设置完地图是固定死的不能拖动
            // roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
            roam: 1,
            //zoom :1,//当前视角的缩放比例。越大比例越大
            // center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
            // label:{//地图上显示文字提示信息
            //   show:true,
            //   // color:"#ff6600",
            //   fontSize:10//字体大小
            // },
            label: {
              normal: {
                // formatter:(params)=>{
                //     console.log(params,'747')
                //     // if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
                //     //   return params.name
                //     // }else{
                //     //   return ''
                //     // }
                //     if(this.nameStr.includes(params.name)){
                //       return params.name
                //     }else{
                //       return ''
                //     }
                //   },
                show: !0,
                fontSize: "7",
                color: "#000",
              },
            },
            itemStyle: {
              normal: {
                // areaColor: "#f2d5ad",
                // areaColor: "#ff3940",
                //shadowBlur: 50,
                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                borderColor: "rgba(0, 0, 0, 0.2)",
              },
  
              // emphasis: {
              //     areaColor: "#ff6600",
              //     shadowOffsetX: 0,
              //     shadowOffsetY: 0,
              //     borderWidth: 0
              // }
            },
            label: {
              show: true,
              fontSize: "10",
              color: "#fff",
            },
            // itemStyle:{//地图区域的多边形 图形样式。
            //   areaColor:"#ff6600"//地图区域的颜色。
            // }
            // label: {
            //   show: true,
            //   color: "#1DE9B6",
            // },
          },
          // legend: {
          //   left: '5%',
          //   bottom: '5%',
          //   orient: 'vertical'
          // },
          series: [
            {
              name: "殡葬",
              type: "map",
              geoIndex: 0,
              data: this.dataList,
            },
          ],
        };
        this.chartInstance.setOption(initOption);
        var bmap = this.chartInstance.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl)
        this.chartInstance.on("click", async (arg) => {
          // arg.name 得到所点击的省份, 这个省份他是中文
          // console.log(arg.data.label, "777");
          // this.mapName=arg.data.label;
          // let mapData=  axios.get("http://localhost:8080/getMovies").then
          
        });
      },
      updatePolygonPath(e) {
        this.polygonPath = e.target.getPath();
      },
      mapReady({ BMap, map }) {
        this.map = map;
        // let mapStyle = { style: "midnight" };
        // map.setMapStyle(mapStyle);
        var geolocation = new BMap.Geolocation();
        // 开启SDK辅助定位
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition((r) => {}, {
          enableHighAccuracy: true, //要求浏览器获取最佳结果
        });
      },
      syncCenterAndZoom(e) {
        // 返回地图当前的缩放级别
        this.zoom = e.target.getZoom();
        const position = e.target.getCenter();
        // 此时已经可以获取到BMap类
        if (this.map) {
          const that = this;
          // Geocoder() 类进行地址解析
          // 创建地址解析器的实例
          const geoCoder = new this.map.Geocoder();
          // getLocation() 类--利用坐标获取地址的详细信息
          // getPoint() 类--获取位置对应的坐标
          geoCoder.getLocation(position, function (res) {
            // console.log('获取经纬度', position, '获取详细地址', res)
            const addrComponent = res.addressComponents;
            const surroundingPois = res.surroundingPois;
            const province = addrComponent.province;
            const city = addrComponent.city;
            const district = addrComponent.district;
            let addr = addrComponent.street;
            if (surroundingPois.length > 0 && surroundingPois[0].title) {
              if (addr) {
                addr += `-${surroundingPois[0].title}`;
              } else {
                addr += `${surroundingPois[0].title}`;
              }
            } else {
              addr += addrComponent.streetNumber;
            }
            that.choosedLocation = {
              province,
              city,
              district,
              addr,
              ...position,
            };
            that.$emit("changeCenter", {
              zoom: that.zoom,
              location: that.choosedLocation,
            });
          });
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 0;
  }
  .map {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .container {
      flex: 1;
      width: 100%;
      position: relative;
      .map-contain {
        width: 100%;
        height: 100%;
      }
      /deep/ .el-button--primary {
        background-color: #04132c;
        position: absolute;
        left: 0.15rem;
        top: 0;
        z-index: 122;
      }
      /* 左侧弹窗 */
      .left_model {
        // width: 460px;
        width: 5.75rem;
        height: 100%;
        position: absolute;
        left: 0.15rem;
        top: 0;
        padding: 0 0.15rem;
        background-image: url("~@/assets/imgs/model_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: all 2s;
        z-index: 120;
        display: flex;
        flex-direction: column;
  
        .left_model_title {
          position: relative;
          width: 100%;
          height: 0.5rem;
          font-size: 0.275rem;
          font-family: SourceHanSansSC-Bold, SourceHanSansSC;
          font-weight: bold;
          color: #bfe8ff;
          line-height: 0.5rem;
          text-align: center;
          color: #1df9fc;
          /* margin-bottom: 20px; */
        }
        .model_content {
          width: 100%;
          height: calc(100% - 40px);
          display: flex;
          flex-direction: column;
          .model_title {
            width: 100%;
            height: 0.625rem;
            border: 1px solid #00a7a9;
            margin-top: 0.25rem;
            display: flex;
            .model_title_item {
              flex: 1;
              font-size: 0.225rem;
              color: #fff;
              text-align: center;
              line-height: 0.625rem;
            }
            .recState {
              width: 150px;
              text-align: center;
              font-size: 0.225rem;
              color: #fff;
              text-align: center;
              line-height: 0.625rem;
            }
          }
          .seamless_warp {
            height: calc(100% - 0.875rem);
            overflow-y: scroll;
            .list_item {
              display: flex;
              align-items: center;
              line-height: 50px;
              color: #fff;
              cursor: pointer;
              .item {
                flex: 1;
                text-align: center;
              }
              .recStateDesc {
                width: 150px;
                text-align: center;
              }
            }
            .going {
              color: #81ff5d;
            }
            .grey {
              color: gray;
            }
            .back {
              color: #eebd2a;
            }
            .yuyue {
              color: #1df9fc;
            }
            .yujing {
              color: #e24646;
            }
          }
        }
      }
      /* 中间弹窗 */
      .center_model {
        width: 10rem;
        height: 100%;
        background-color: #04132c;
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0.7;
      }
      .map_chart {
        width: 10rem;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  </style>